<template>
  <div style="width:87%;padding-bottom: 50px;">
    <div class="base-list">
      <div
        v-for="company in baseList"
        :key="company.id"
        class="base"
        @click="openPage(company.websiteAddress)"
      >
        <!-- 图片 -->
        <img
          v-if="company.img"
          class="head"
          :src="company.img"
        >
        <!-- 图片右边的内容 -->
        <div class="content">
          <!-- 内容的头部 -->
          <div class="content-head">
            <a class="name">
              {{ company.companyName }}
            </a>
            <!-- 主体内容 -->
            <div class="content-body">
              <!-- 主体内容左边 -->
              <div class="left">
                <div class="item">
                  <a class="label">年销量:</a>
                  <a
                    v-if="company.annualSell"
                    class="value"
                  >{{ company.annualSell }}万元</a>
                </div>
                <div class="item">
                  <a class="label">电子邮箱：</a>
                  <a class="value">{{ company.email }}</a>
                </div>
              </div>
              <div
                v-if="!company.img"
                style="width: 120px"
              />
              <!-- 主体内容中间 -->
              <div class="center">
                <div class="item">
                  <a class="label">主要产品：</a>
                  <a class="value" style="text-overflow:ellipsis; width: 350px;overflow: hidden;white-space:nowrap;">{{ company.mainProducts }}</a>
                </div>
                <div class="item">
                  <a class="label">联系人：</a>
                  <a class="value">{{ company.contacts }}</a>
                </div>
              </div>
              <!-- 主体内容右边 -->
              <div class="right">
                <div class="item">
                  <a class="label">年产量：</a>
                  <a class="value">{{ company.annualOutput }}</a>
                </div>
                <div class="item">
                  <a class="label">联系电话：</a>
                  <a class="value">{{ company.contactPhone }}</a>
                </div>
              </div>
            </div>
            <div class="item" style="width:100%">
              <a class="label">详细地址：</a>
              <a class="value address">{{ company.address }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="total"
      background=""
      prev-text="上一页"
      next-text="下一页"
      :current-page="pageNum"
      :page-size="pageSize"
      style="margin-top:15px"
      @size-change="pageSizeChange"
      @current-change="pageChange"
    />
  </div>

</template>

<script>
import { getCompanyPage } from '@/api/company'
export default {
  data() {
    return {
      baseList: [],
      pageNum: 1,
      pageSize: 5,
      total: 0
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load() {
      getCompanyPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.baseList = res.data.records
        this.total = res.data.total
      })
    },
    openPage(val) {
      if (val) {
        window.open(val, '企业网站')
      }
    },
    pageChange(page) {
      this.pageNum = page
      this.load()
    },
    pageSizeChange(size) {
      this.pageSize = size
      this.load()
    }
  }
}
</script>

<style lang="scss" scoped>
.base-list {
  min-height: 700px;
  margin: 0 auto;
  margin-top: 50px;

  .base {
    width: 100%;
    display: flex;
    cursor: pointer;
    border-bottom: 1.9px rgba(0, 0, 0, 0.1) solid;
    margin-bottom: 20px;

    .head {
      width: 100px;
      height: 110px;
      margin-right: 20px;
    }

    .content {
      text-align: left;
      width: 100%;
      padding-bottom: 20px;

      .content-head {
        width: 100%;

        .name {
          font-size: 17px;
          display: flex;
          text-align: start;
          font-weight: bold;

          .tag {
            white-space: nowrap;
            width: auto;
            padding: 2px 5px;
            border-radius: 5px;
            margin: 0 5px;
          }
        }

        .name:hover {
          color: #00a651;
        }
      }

      .content-body {
        margin-top: 10px;
        text-align: left;
        display: flex;
      }
    }

    .item {
      display: flex;
      margin: 2px 0;
      width: 500px;
      margin-bottom: 5px;

      .label {
        color: #666666;
        font-size: 14px;
      }

      .value {
        color: #333333;
        font-size: 14px;
      }

      .address{
        width: 1000px;
      }
    }

    .line {
      width: 100%;
      border-top: 1px black solid;
      height: 50px;
    }
  }
}
</style>
